<template>
  <view class="bg-[#F7F8FA] min-h-[100vh]  flex flex-col">
    <!-- <Navbar title="个人中心" /> -->
    <view class="flex-1 relative">
      <view class="h-[450rpx] z-[-1] ">
        <image src='/static/download-1.png' mode='widthFix' class='w-full h-[450rpx]!'></image>
      </view>
      <view class="flex items-center absolute top-[150rpx] px-4 w-full">
        <TnAvatar url="https://vue2.tuniaokj.com/assets/tnkewo.CDOv4Waw.jpg" size="120" />
        <view class="ml-4 text-[#fff] flex-1">
          <view class="mb-2 text-[28rpx] font-bold">用户：肖关光</view>
          <view class="text-[24rpx] ">账号：12383840736</view>
        </view>
        <view class="ml-4 text-[#fff]">
          <TnButton type="info" class="w-full! h-[60rpx] px-4!">
            退出登陆
          </TnButton>
        </view>
      </view>
      <view class="relative top-[-80rpx] mx-2!">
        <Card :style="{
          padding: '10rpx !important'
        }">
          <!-- 选项卡 -->
          <view class="flex items-center">
            <view v-for="(tab, index) in tabsData" :key="index" @click="currentTabIndex = index"
              class="p-2 flex-1 w-0 h-[100rpx] text-[24rpx] flex justify-center items-center" :class="[
                'rounded-[10rpx] m-1 flex-1 text-center cursor-pointer',
                currentTabIndex === index
                  ? 'shadow-inset shadow-[rgba(174,174,192,0.4)_3px_3px_6px_0px_inset,_rgba(255,255,255,0.8)_-3px_-3px_6px_1px_inset] text-gray-600'
                  : 'shadow-[rgba(174,174,192,0.4)_3px_3px_6px_0px,_rgba(255,255,255,0.8)_-3px_-3px_6px_1px] text-gray-600'
              ]">
              {{ tab.text }}
            </view>
          </view>
        </Card>
      </view>

      <view class="data-container mx-4 mb-4 p-4 relative top-[-50rpx]" v-for="i in 6">
        <view class="mb-2">时间：5月5日 13:59 </view>
        <view class="mb-2">姓名：刘易阳</view>
        <view class="mb-2">电话：1307623723 </view>
        <view class="">操作：
          <TnButton type="info" class="text-blue text-[24rpx]!" text>
            编辑
          </TnButton>
          <TnButton type="info" class="text-blue text-[24rpx]!" text>
            加白
          </TnButton>
        </view>
      </view>

    </view>
    <Tabbar :currentTabbar="1" v-if="show" />
  </view>
</template>

<script setup lang="ts">
import { Tabbar } from '@/components/tabbar';
import TnAvatar from '@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar.vue'
import { TnButton } from '@tuniao/tnui-vue3-uniapp';
import { nextTick, ref } from 'vue'
import { Card } from '@/components/card';
import { onShow } from '@dcloudio/uni-app';
const show = ref(true);
onShow(() => {
  show.value = false;
  nextTick(() => {
    show.value = true;
  })
})
// 当前选中的标签索引
const currentTabIndex = ref(0)
const tabsData = [
  {
    text: '一般性访客历史记录',
  },
  {
    text: '物资进出类访客',
  },
  {
    text: '自有货车访客',
  },
]
</script>

<style lang="scss">
.data-container {
  position: relative;
  background: #fff;

  &:before {
    background: repeating-linear-gradient(-45deg, #ff976a 0, #ff976a 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
    content: "";
    background-size: 80px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>